<template>
    <div class="detail">
        <!-- 导航栏 -->
        <van-nav-bar>
            <template #left>
                <van-icon name="arrow-left" @click="$router.go(-1)" />
                <!-- 作者信息 -->
                <template v-if="authVisible">
                    <van-image
                        class="header-item"
                        round
                        width="25px"
                        height="25px"
                        :src="detail.aut_photo"
                    />
                    <div class="header-item user-name">
                        {{ detail.aut_name }}
                    </div>
                    <div class="header-item separator"></div>
                    <div class="header-item subscribe-btn">关注</div>
                </template>
            </template>
            <template #right>
                <van-icon name="ellipsis" />
            </template>
        </van-nav-bar>

        <!-- 内容窗口 -->
        <div
            class="content-wrapper"
            @scroll="onScroll"
        >
            <!-- 内容 -->
            <div class="content">
                <van-cell class="header">
                    <div class="title">{{ detail.title }}</div>
                    <div class="article-info">
                        <div class="date">{{ articlePubDate }}</div>
                        <div class="split-line">|</div>
                        <div class="readed-count">{{ detail.read_count }}阅读</div>
                        <div class="split-line">|</div>
                        <div class="comment-count">{{ detail.comm_count }}评论</div>
                    </div>
                    <div class="author-info">
                        <van-image
                            class="avatar"
                            round
                            width="36px"
                            height="36px"
                            :src="detail.aut_photo"
                        />
                        <div class="author-name">{{ detail.aut_name }}</div>
                        <van-button
                            class="btn"
                            round
                            color="orange"
                            size="small"
                        >
                            + 关注
                        </van-button>
                    </div>
                </van-cell>
                <div v-highlight v-html="detail.content" />
                <div class="footer">
                    发布文章时间：{{ articlePubDate }}
                </div>
                <div class="comments-wrapper">
                    <van-sticky :offset-top="46">
                        <van-cell
                            :title="`全部评论(${ detail.comm_count })`"
                            :value="`${ detail.like_count }点赞`"
                        />
                    </van-sticky>
                    <comment-list
                        :loading="commentListLoading"
                        :empty="detail.comm_count === 0"
                        :commentList="commentList"
                        @onLike="(comment) => likeComment(comment.com_id, comment.is_liking)"
                        @onComment="openSubCommentList"
                    />
                </div>
            </div>
        </div>

        <van-tabbar>
            <van-search
                class="comment-inp"
                v-model="commentValue"
                placeholder="抢沙发"
                left-icon="edit"
                shape="round"
            />
            <van-tabbar-item icon="edit" :badge="detail.comm_count">评论</van-tabbar-item>
            <van-tabbar-item icon="good-job-o" :badge="detail.like_count">点赞</van-tabbar-item>
            <van-tabbar-item icon="like-o">收藏</van-tabbar-item>
            <van-tabbar-item icon="guide-o">分享</van-tabbar-item>
        </van-tabbar>

        <van-popup
            v-model="subCommentListPopupVisible"
            position="bottom"
            class="comment-popup"
        >
            <van-nav-bar title="回复">
                <template #left>
                    <van-icon
                        name="arrow-left"
                        @click="subCommentListPopupVisible = false"
                    />
                </template>
            </van-nav-bar>

            <comment-item
                :comment="currentComment"
                @onLike="() => likeComment(currentComment.com_id, currentComment.is_liking)"
                isSub
            />

            <van-sticky :offset-top="46">
                <van-cell title="全部回复" />
            </van-sticky>

            <comment-list
                :loading="subCommentListLoading"
                :empty="subCommentList.length === 0"
                :commentList="subCommentList"
                @onLike="(comment) => likeComment(comment.com_id, comment.is_liking, true)"
                @onComment="(comment) => {}"
                isSub
            />

            <van-tabbar>
                <van-search
                    class="sub-comment-inp"
                    v-model="subCommentValue"
                    placeholder="抢沙发"
                    left-icon="edit"
                    shape="round"
                    @search="pubSubComment"
                />
                <van-tabbar-item icon="like-o">收藏</van-tabbar-item>
                <van-tabbar-item icon="guide-o">分享</van-tabbar-item>
            </van-tabbar>
        </van-popup>
    </div>
</template>

<script src="./main.js"></script>

<style lang="less" scoped>
    @import url('./main.less');
</style>
